<template>
  <div id="configureTagsList">
    <h1 class="con-right-title">
      <i class="fa fa-reply" @click="cancel"></i>
      配置标签
    </h1>
    <div class="bottom-box">
      <!--table-->
      <div class="table">
        <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
        <!-- 操作按钮部分 -->
        <div class="table-conBtn">
          <el-button
            v-permission="'wh:system:configureTagsClassify:add'"
            type="warning"
            :disabled="isAbleds"
            icon="el-icon-plus"
            @click="handelAdd"
          >
            添加标签
          </el-button>
          <freshCom @searchList="searchList"></freshCom>
        </div>
        <!-- 表格部分 -->
        <el-table
          v-loading="loading"
          :data="tableData"
          style="width: 100%"
          @selection-change="selectChange"
          max-height="490"
          ref="table"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column type="index" width="60" label="序号">
            <template slot-scope="scope">
              {{
                scope.$index
                  | filterPage(searchParams.pageNum, searchParams.pageSize)
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="id"
            min-width="90"
            label="标签ID"
          ></el-table-column>
          <el-table-column
            prop="labelName"
            min-width="120"
            label="标签名称"
          ></el-table-column>
          <el-table-column
            prop="labelCategoryName"
            min-width="120"
            label="所属标签分类"
          ></el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            min-width="120"
          ></el-table-column>
          <el-table-column
            prop="labelProperty"
            min-width="140"
            label="标签属性"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row.labelProperty"
                :class="scope.row.labelProperty | filterClass('labelPrope')"
                >{{ scope.row.labelProperty | filterName('labelPrope') }}</span
              >
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            label="包含内容数"
            prop="count"
            min-width="130"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.count !== null">{{ scope.row.count }}</span>
              <el-button
                v-else
                type="text"
                @click="showNum(scope.row.id, scope.$index)"
                >查看数量</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            label="创建者"
            prop="createUser.userName"
            min-width="100"
          >
          </el-table-column>
          <el-table-column
            prop="createdDate"
            width="160"
            label="创建时间"
          ></el-table-column>
          <el-table-column prop="enabled" width="120" label="标签状态">
            <template slot-scope="scope">
              <span v-if="scope.row.enabled === true">启用</span>
              <span v-if="scope.row.enabled === false">停用</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="180">
            <template slot-scope="scope">
              <el-button
                v-permission="'wh:system:configureTagsClassify:enable'"
                v-if="scope.row.enabled === false"
                type="text"
                @click="handelEndabled(scope.row.id)"
              >
                启用
              </el-button>
              <el-button
                v-permission="'wh:system:configureTagsClassify:disable'"
                v-if="scope.row.enabled === true"
                type="text"
                @click="handelDisabld(scope.row.id)"
              >
                停用
              </el-button>
              <el-button
                v-permission="'wh:system:configureTagsClassify:remove'"
                type="text"
                @click="remove(scope.row.id)"
              >
                删除标签
              </el-button>
              <el-button v-if="scope.row.isRecommend === true" type="text">
                已推荐
              </el-button>
              <el-button
                v-if="
                  scope.row.isRecommend === false &&
                    scope.row.enabled === true &&
                    scope.row.labelProperty === 'HIDING_TAG'
                "
                type="text"
                @click="handelRecommend(scope.row.id)"
              >
                推荐
              </el-button>
              <el-button
                v-permission="'wh:system:configureTagsClassify:detail'"
                type="text"
                @click="changeView(scope.row.id)"
              >
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-全局组件-->
        <pageCom
          :searchParams="searchParams"
          :total="total"
          @searchList="searchList"
        ></pageCom>
        <!-- 添加标签弹窗 -->
        <addDialog
          v-if="dialogAddData.isShow"
          :dialogAddData="dialogAddData"
          @refresh="refresh"
        >
        </addDialog>
      </div>
    </div>
  </div>
</template>
<script>
import { disable, enable } from '@/api/contentTags/configureTag' // 接口
import {
  getConTagsList,
  delLable,
  putTagsugge,
  getContNum
} from '@/api/contentTags/configureTation' // 接口
import topSearch from '@component/contentTags/configureLabelClassification/topSearch' // 上部搜索条件
import addDialog from '@component/contentTags/configureLabelClassification/addDialog' // 添加标签
import { saveScrollMixins } from '@/mixins/saveScroll'
export default {
  name: 'tagSecondList',
  msg: '标签分类',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    addDialog
  },
  data() {
    return {
      loading: false,
      total: 10,
      isAbleds: false,
      pageName: 'tagSecondList',
      tableData: [], // table内容
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      formInline: {
        labelProperty: '', // 标签属性
        labelCategoryName: '', // 分类名称
        labelName: '' // 标签名称
      },
      dialogAddData: {
        isShow: false,
        params: {}
      },
      // 选中行的数据
      selectData: [],
      powerStr: 'system:configureTagsClassify:list', // 是否查询的标识
      canGetList: true, // 是否可以查询列表
      powerAry: [], // 可显示的权限
      canShowPage: false // 是否显示当前页面
    }
  },
  watch: {
    // $route.path改变时，mounted()不执行,通过监听$route.path，执行进入页面方法
    '$route.path': 'init'
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.init()
    // 获取权限
    // this.getPower()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },

  methods: {
    /* 进入页面执行的方法 */
    init() {
      if (this.$route.query.labelPrope) {
        this.isAbleds = true
      }
      this.formInline.labelProperty = this.$route.query.labelPrope
      this.formInline.labelCategoryName = this.$route.query.labelCategory
      this.searchList()
      this.$forceUpdate()
    },
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        if (!res.includes(this.powerStr)) {
          this.canGetList = false
          this.alertPower(this.powerStr)
        } else {
          this.canShowPage = true
          this.init()
        }
      })
    },

    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      getConTagsList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.msg,
            type: 'warning'
          })
        }
      )
    },
    // 选择框改变事件
    selectChange(value) {
      this.selectData = value
      this.isDisabled = !(this.selectData.length > 0)
    },
    // 推荐
    handelRecommend(id) {
      putTagsugge(
        id,
        (response) => {
          this.$message({
            type: 'success',
            message: '推荐成功'
          })
          this.searchList()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 添加标签
    handelAdd() {
      this.dialogAddData.isShow = true
    },
    // 启用
    handelEndabled(id) {
      enable(
        id,
        (response) => {
          this.$message({
            type: 'success',
            message: '已启用'
          })
          this.searchList()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 停用
    handelDisabld(id) {
      this.$confirm(
        '停用操作会导致该标签从“推荐”/“话题”中移除，您还确认停用吗？',
        '系统提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          disable(
            id,
            (response) => {
              this.$message({
                type: 'success',
                message: '已停用'
              })
              this.searchList()
            },
            (response) => {
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
        })
        .catch(() => {})
    },
    // 删除标签
    remove(id) {
      this.$confirm('确定删除标签吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delLable(
            id,
            (response) => {
              this.searchList()
            },
            (response) => {
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
        })
        .catch(() => {})
    },
    /*显示数量弹窗*/
    showNum(id, index) {
      getContNum(
        id,
        (response) => {
          this.tableData[index].count = response
        },
        (response) => {
          this.$message.warning('获取内容数失败,' + response.message)
          this.loading = false
        }
      )
    },
    // 返回按钮
    cancel() {
      this.$router.go(-1)
      // let query = {
      //   mId: this.$route.query.mId
      // }
      // this.$router.replace({ name: 'configureTag', query: query })
    },
    /* 查看详情跳转页面 */
    changeView(id) {
      let query = {
        from: this.pageName,
        labelPrope: this.formInline.labelProperty,
        labelCategoryName: this.formInline.labelCategoryName,
        pId: this.$route.query.id,
        id
      }
      this.$router.push({
        name: 'wh:poly:content:show:menu',
        query: query
      })
    },
    /* 刷新列表 */
    refresh() {
      this.toSearch()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>
<style lang="less" scoped>
#configureTagsList {
  .el-table {
    margin-top: 20px;
  }
  .detail-content {
    cursor: pointer;
    color: #009dd9;
  }
}
</style>
